<template>
  <div class="app-container">
    <info-page-container>
      <template slot="body">
        <el-empty v-if="chitInfo == null" description="暂无数据"></el-empty>
        <div v-else class="chit-info-body">
          <div class="txt-parent-con">
            <div class="txt-con">

              <div class="info-model">
                <el-alert
                    :style="{'margin-bottom': `${orderGisState ? 20 : 0}px`}"
                    :closable="false"
                    :type="orderGisState ? 'success' : 'warning'">
                  <template slot="title">
                    <div class="alert-txt">
                      <div class="txt">
                        <i class="el-icon-warning"></i>
                        {{ orderGisState ? '已上传空间数据' : '暂未上传空间数据' }}
                      </div>
                      <div class="bt" @click="importGisData">
                        <i class="el-icon-upload2"></i>{{ orderGisState ? '重新上传' : '立即上传' }}
                      </div>
                    </div>
                  </template>
                </el-alert>


                <!--                <el-alert-->
                <!--                    v-if="orderGisState"-->
                <!--                    :closable="false"-->
                <!--                    :type="chitInfo.orderGisUploadState == '0' ? 'warning' : (chitInfo.orderGisUploadState == '1' ? 'success' : 'error')">-->
                <!--                  <template slot="title">-->
                <!--                    <div class="alert-txt">-->
                <!--                      <div class="txt">-->
                <!--                        <i class="el-icon-warning"></i>-->
                <!--                        {{-->
                <!--                          chitInfo.orderGisUploadState == '0' ? '未上传至核心系统' : (chitInfo.orderGisUploadState == '1' ? '上传核心系统成功' : '上传核心系统失败')-->
                <!--                        }}-->
                <!--                      </div>-->
                <!--                      <div class="bt">-->
                <!--                          <span @click="showRequestData" style="cursor:pointer;margin-right: 10px">-->
                <!--                          <i class="el-icon-search"></i>查看请求数据-->
                <!--                          </span>-->

                <!--                        <span @click="showResData" style="cursor:pointer;margin-right: 10px">-->
                <!--                          <i class="el-icon-search"></i>查看响应数据-->
                <!--                          </span>-->

                <!--                        <span @click="showUploadData" style="cursor:pointer;">-->
                <!--                          <i class="el-icon-upload2"></i>上传到核心系统-->
                <!--                          </span>-->
                <!--                      </div>-->
                <!--                    </div>-->
                <!--                  </template>-->
                <!--                </el-alert>-->
              </div>

              <el-collapse v-model="activeNames" accordion>
                <el-collapse-item name="1">
                  <template slot="title">
                    <decorate :title="`保单信息 - ${chitInfo.tbdh}`"></decorate>
                  </template>
                  <div class="row-con">
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">投保人：</div>
                        <div class="value">{{ chitInfo.tbr }}</div>
                      </div>
                    </div>
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">保险单号码：</div>
                        <div class="value">{{ chitInfo.bxdhm }}</div>
                      </div>
                    </div>
                  </div>

                  <div class="row-con">
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">保单类型 ：</div>
                        <div class="value">{{ chitInfo.orderTypeName }}</div>
                      </div>
                    </div>
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">户数 ：</div>
                        <div class="value">{{ chitInfo.hs }}户</div>
                      </div>
                    </div>
                  </div>

                  <div class="row-con">
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">是否验标 ：</div>
                        <div class="value">{{ chitInfo.sfyb }}</div>
                      </div>
                    </div>
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">投保单号 ：</div>
                        <div class="value">{{ chitInfo.tbdh }}</div>
                      </div>
                    </div>
                  </div>

                  <div class="row-con">
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">投保面积 ：</div>
                        <div class="value">{{ chitInfo.tbmj }}</div>
                      </div>
                    </div>
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">投保人/被保险人 ：</div>
                        <div class="value">{{ chitInfo.tbr }}</div>
                      </div>
                    </div>
                  </div>

                  <div class="row-con">
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">险种代码 ：</div>
                        <div class="value">{{ chitInfo.xzdm }}</div>
                      </div>
                    </div>
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">险种名称 ：</div>
                        <div class="value">{{ chitInfo.xzmc }}</div>
                      </div>
                    </div>
                  </div>

                  <div class="row-con">
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">总保费 ：</div>
                        <div class="value">{{ chitInfo.zbf }}</div>
                      </div>
                    </div>
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">自交保费 ：</div>
                        <div class="value">{{ chitInfo.zjbf }}</div>
                      </div>
                    </div>
                  </div>

                  <div class="row-con">
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">保单期限 ：</div>
                        <div class="value">{{ chitInfo.bdqx }}</div>
                      </div>
                    </div>
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">备注 ：</div>
                        <div class="value">{{ chitInfo.remark }}</div>
                      </div>
                    </div>
                  </div>

                </el-collapse-item>
              </el-collapse>

              <div class="chit-data-container">
                <el-tabs v-model="activeName">
                  <el-tab-pane label="保单明细" name="bdmx">
                    <list-page-container v-if="activeName === 'bdmx'">
                      <template slot="table">
                        <el-table :data="bdmxData" height="100%">
                          <el-table-column label="投保人" align="center" prop="bxrxm"/>
                          <el-table-column label="地块序号" align="center" prop="dkxh"/>
                          <el-table-column label="地块类型" align="center" prop="dklx"/>
                          <el-table-column label="地块名称" align="center" prop="dkmc"/>
                          <el-table-column label="地块种植数量" align="center" prop="dkzzsl"/>
                          <el-table-column label="地块投保数量" align="center" prop="dltbsl"/>
                          <el-table-column label="联系方式" align="center" prop="lxfs"/>
                          <el-table-column label="开户行" align="center" prop="nhkhh"/>
                          <el-table-column label="身份证号/组织机构代码" align="center" prop="sfzh"/>
                          <el-table-column label="保险标的所属村级代码" align="center" prop="sscjdm"/>
                          <el-table-column label="保险标的所属村级名称" align="center" prop="sscjmc"/>
                          <el-table-column label="银行折(卡)号" align="center" prop="yhkh"/>
                          <el-table-column label="有无灌溉条件" align="center" prop="ywggtj"/>
                          <!--                          <el-table-column label="保险公司理赔金额" align="center" prop="bxLpje"/>-->
                          <!--                          <el-table-column label="抽查理赔金额" align="center" prop="nyjLpje"/>-->
                        </el-table>
                      </template>

                      <template slot="pageDisplay">
                        <pagination
                            v-show="bdmxTotal>0"
                            :total="bdmxTotal"
                            :page.sync="bdmxPageQueryParam.pageNum"
                            :limit.sync="bdmxPageQueryParam.pageSize"
                            @pagination="getBdmxDataList"
                        />
                      </template>
                    </list-page-container>
                  </el-tab-pane>
                  <el-tab-pane label="受灾明细" name="szmx">
                    <list-page-container v-if="activeName === 'szmx'">
                      <template slot="table">
                        <el-table :data="szData" height="100%">
                          <el-table-column label="投保人" align="center" prop="tbr" :show-overflow-tooltip="true"/>
                          <el-table-column label="地块名称" align="center" prop="dkmc" :show-overflow-tooltip="true"/>
                          <el-table-column label="种植属性" align="center" prop="zzsx" :show-overflow-tooltip="true"/>
                          <el-table-column label="受灾等级" align="center" prop="szdj" :show-overflow-tooltip="true"/>
                          <el-table-column label="面积(平方米)" align="center" prop="pfm"
                                           :show-overflow-tooltip="true"/>
                          <el-table-column label="面积(亩)" align="center" prop="mu" :show-overflow-tooltip="true"/>

                        </el-table>
                      </template>
                    </list-page-container>
                  </el-tab-pane>
                  <el-tab-pane label="理赔明细" name="lpmx">
                    <list-page-container v-if="activeName === 'lpmx'">
                      <!--                      <template slot="handel">-->
                      <!--                        <el-row class="handle-container mb8" :gutter="10">-->
                      <!--                          <el-col :span="1.5">-->
                      <!--                            <el-button type="primary" icon="el-icon-download" size="mini" @click="exportData">-->
                      <!--                              导出理赔差异明细-->
                      <!--                            </el-button>-->
                      <!--                          </el-col>-->
                      <!--                        </el-row>-->
                      <!--                      </template>-->
                      <template slot="table">
                        <el-table :data="lpData" height="100%">
                          <el-table-column label="受灾生育期" align="center" prop="szsyqName"
                                           :show-overflow-tooltip="true"/>
                          <el-table-column label="绝收面积" align="center" prop="jsmj"
                                           :show-overflow-tooltip="true"/>
                          <el-table-column label="单位面积平均损失产量" align="center" prop="pjss"
                                           :show-overflow-tooltip="true"/>
                          <el-table-column label="单位面积标准产量" align="center" prop="bzcl"
                                           :show-overflow-tooltip="true"/>
                          <el-table-column label="成灾面积" align="center" prop="czmj"
                                           :show-overflow-tooltip="true"/>
                          <el-table-column label="灾害类型" align="center" prop="zhlxName"
                                           :show-overflow-tooltip="true"/>
                          <el-table-column label="单位保费" align="center" prop="dwbf"
                                           :show-overflow-tooltip="true"/>
                          <el-table-column label="理赔金额" align="center" prop="lpje"
                                           :show-overflow-tooltip="true"/>
                          <el-table-column label="灾害等级" align="center" prop="zhdj"
                                           :show-overflow-tooltip="true"/>
                          <el-table-column label="保险理赔面积" align="center" prop="bxlpmj"
                                           :show-overflow-tooltip="true"/>
                        </el-table>
                      </template>
                    </list-page-container>
                  </el-tab-pane>
                  <el-tab-pane label="抽查明细" name="ccmx">
                    <list-page-container v-if="activeName === 'ccmx'">
                      <template slot="table">
                        <el-table :data="ccData" height="100%">
                          <el-table-column label="受灾生育期" align="center" prop="szsyqName"
                                           :show-overflow-tooltip="true"/>
                          <el-table-column label="绝收面积" align="center" prop="jsmj"
                                           :show-overflow-tooltip="true"/>
                          <el-table-column label="单位面积平均损失产量" align="center" prop="pjss"
                                           :show-overflow-tooltip="true"/>
                          <el-table-column label="单位面积标准产量" align="center" prop="bzcl"
                                           :show-overflow-tooltip="true"/>
                          <el-table-column label="成灾面积" align="center" prop="czmj"
                                           :show-overflow-tooltip="true"/>
                          <el-table-column label="灾害类型" align="center" prop="zhlxName"
                                           :show-overflow-tooltip="true"/>
                          <el-table-column label="单位保费" align="center" prop="dwbf"
                                           :show-overflow-tooltip="true"/>
                          <el-table-column label="理赔金额" align="center" prop="lpje"
                                           :show-overflow-tooltip="true"/>
                        </el-table>
                      </template>
                    </list-page-container>
                  </el-tab-pane>

                </el-tabs>
              </div>
            </div>
          </div>
        </div>
      </template>
      <!--      <template slot="footer">-->
      <!--        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleUpdate">修改保单</el-button>-->
      <!--      </template>-->
    </info-page-container>

    <el-drawer
        class="diy-draw"
        :title="title"
        :wrapperClosable="false"
        :visible.sync="open">
      <drawer-content>
        <template slot="body">
          <el-scrollbar>
            <span class="long-txt">
              {{ message }}
            </span>
          </el-scrollbar>
        </template>
        <template slot="footer">
          <el-button size="mini" @click="cancel">取消
          </el-button>
          <el-button v-if="showHan" type="primary" size="mini" @click="uploadDataToSys">上传
          </el-button>

        </template>
      </drawer-content>
    </el-drawer>
  </div>
</template>

<script>
import {chitSubPageMixins} from "@/views/chit/mixins/chitSubPageMixins";
import BaseMap from "@/components/BaseMap/index.vue";
import {CHIT_DETAIL_CONFIG, GEOMETRY_TYPE, INSURANCE_CONFIG} from "@/constantData";
import Decorate from "@/views/components/Decorate/index.vue";
import ShowFileList from "@/components/ShowFileList/index.vue";
import {isArr} from "@/utils/arrayUtil";
import ValueTable from "@/components/ValueTable/index.vue";
import guid from "@/utils/guid";
import {UploadFileObj} from "@/utils/uploadFile";
import {
  getGisRepData,
  getGisReqData,
  getOrderBaseVo, getOrderDisasterData, getOrderDisasterDataNoGis,
  importGisData,
  previewGisReq, queryClaimData, queryClaimDataForCc, queryOrderDetailListNoGis, queryOrderDetailsById,
  updateGisData
} from "@/api/chit/chitListPage";
import {exportFile} from "@/utils/exportFile";

export default {
  name: "chitInfo",
  components: {
    Decorate,
    BaseMap,
    ValueTable,
    ShowFileList,
  },
  data() {
    return {
      activeNames: ['1'],
      activeName: 'bdmx',
      valueTableConfig: _.cloneDeep(INSURANCE_CONFIG),
      valueTableDetailsConfig: _.cloneDeep(CHIT_DETAIL_CONFIG),
      fileId: `f${guid()}`,
      title: '',
      message: '',
      open: false,
      showHan: false,
      bdmxData: [],
      szData: [],
      lpData: [],
      ccData: [],
      chitId: '',
      chitInfo: null,

      bdmxPageQueryParam: {
        pageNum: 1,
        pageSize: 10,
      },
      bdmxTotal: 0,

    }
  },
  computed: {
    orderGisState() {
      let {chitInfo} = this
      return chitInfo != null && chitInfo?.orderGisState == '1'
    },
    gisFile() {
      let res = this.$store.state.temporaryFile.temporaryFileList
      return isArr(res) && res.some(item => item.uid == this.fileId) ? res.find(item => item.uid == this.fileId).fileList : []
    }
  },
  watch: {
    gisFile(val) {
      let fileIds = isArr(val) ? val.map(file => file.fileId) : [];
      let fileId = isArr(fileIds) ? fileIds[0] : ''
      if (fileId != null && fileId !== '') {
        this.$store.commit('temporaryFile/REMOVE_ALL_FILE', this.fileId)
        this.uploadGisData(fileId)
      }
    },
  },
  methods: {
    isArr,
    // 请求数据
    showRequestData() {
      let {chitId: orderId} = this
      let owner = this
      owner.startLoading('正在加载....')
      getGisReqData({orderId}).then(res => {
        owner.title = '请求数据预览'
        owner.open = true
        owner.message = res.data
      }).catch((e) => {
      }).finally(() => {
        this.showHan = false
        this.endLoading()
      });
    },
    // 响应数据
    showResData() {
      let {chitId: orderId} = this
      let owner = this
      owner.startLoading('正在加载....')
      getGisRepData({orderId}).then(res => {
        owner.title = '响应数据预览'
        owner.open = true
        owner.message = res.data
      }).catch((e) => {
      }).finally(() => {
        this.showHan = false
        this.endLoading()
      });
    },
    showUploadData() {
      let {chitId: orderId} = this
      let owner = this
      owner.startLoading('正在加载....')
      previewGisReq({orderId}).then(res => {
        owner.title = '上传数据预览'
        owner.open = true
        owner.message = res.data
        owner.showHan = true
      }).catch((e) => {
      }).finally(() => {
        this.endLoading()
      });
    },
    uploadDataToSys() {
      let {chitId: orderId} = this
      let owner = this
      owner.startLoading('正在加载....')
      updateGisData({orderId}).then(async res => {
        owner.$modal.msg(res.data);
        owner.chitInfo = await owner.getChitInfo(orderId)
      }).catch((e) => {
      }).finally(() => {
        owner.cancel()
      });
    },
    cancel() {
      this.showHan = false
      this.endLoading()
      this.open = false
    },
    importGisData() {
      let {fileId: uid} = this
      let uploadObj = UploadFileObj.getInstance();
      uploadObj.uploadFile('temporaryFile/addDoc', {uid})
    },
    uploadGisData(fileId) {
      let {chitId: orderId} = this
      let owner = this
      owner.startLoading('正在加载....')
      importGisData({orderId, fileId}).then(async res => {
        owner.$modal.msgSuccess("导入成功");
        owner.chitInfo = await owner.getChitInfo(orderId)
      }).catch((e) => {
      }).finally(() => {
        owner.endLoading()
      });
    },
    clickFun({funName}, data) {
      if (this[funName] && typeof this[funName] == 'function') {
        this[funName](data)
      }
    },
    handleUpdate() {
      let {chitId} = this
      this.$router.push({path: '/chit/chitInfoAdd', query: {chitId}})
    },
    async getBdmxDataList() {
      let {chitId} = this
      if (chitId == null || chitId == '') {
        return
      }
      this.startLoading('正在加载....')
      let {data: bdmxData, total} = await this.getBdmxData(chitId)
      this.bdmxData = bdmxData
      this.bdmxTotal = total
      this.endLoading()
    },
    getChitInfo(id) {
      return new Promise((resolve, reject) => {
        getOrderBaseVo({id}).then(response => {
          resolve(response.data)
        })
      })
    },
    getBdmxData(id) {
      let {bdmxPageQueryParam} = this
      return new Promise((resolve, reject) => {
        queryOrderDetailListNoGis({id, ...bdmxPageQueryParam}).then(res => {
          resolve({data: res.rows, total: res.total})
        });
      })
    },
    getSzmxData(id) {
      return new Promise((resolve, reject) => {
        getOrderDisasterDataNoGis({id}).then(res => {
          resolve(res.data)
        })
      })
    },
    getLpmxData(id) {
      return new Promise((resolve, reject) => {
        queryClaimData({id}).then(res => {
          resolve(res.data)
        })
      })
    },
    getCcmxData(id) {
      return new Promise((resolve, reject) => {
        queryClaimDataForCc({id}).then(res => {
          resolve(res.data)
        })
      })
    },
    async initData() {
      let {chitId} = this
      if (chitId == null || chitId == '') {
        return
      }
      this.startLoading('正在加载....')
      let owner = this
      Promise.all([this.getChitInfo(chitId), this.getBdmxData(chitId), this.getSzmxData(chitId), this.getLpmxData(chitId), this.getCcmxData(chitId)]).then(resList => {
        let [chitInfo, {data: bdmxData, total}, szData, lpData, ccData] = resList
        owner.chitInfo = chitInfo
        owner.bdmxData = bdmxData
        owner.bdmxTotal = total
        owner.szData = szData
        owner.lpData = lpData
        owner.ccData = ccData
      }).finally(() => {
        owner.endLoading()
      })
    },
    exportData() {
      let {chitId: id} = this
      exportFile({
        path: '/business/insuranceOrder/orderClaim/exportClaimDiscrepancy',
        fileType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        params: {id},
        fileName: '理赔差异明细.xlsx',
        method: 'get'
      }).then(res => {
        this.$message.success('导出成功')
      })
    }
  },
  created() {
    this.chitId = this.$route.query?.chitId != null && this.$route.query?.chitId !== '' ? this.$route.query.chitId : null;
    this.initData()
  }
}
</script>

<style scoped lang="scss">
.chit-info-body {
  height: 100%;
  width: 100%;

  ::v-deep .el-alert__content {
    width: 100%;
  }

  .alert-txt {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .txt {
    }

    .bt {
      cursor: pointer;
      color: rgba(19, 194, 115, 1);
    }
  }

  .txt-parent-con {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .txt-con {
    height: 100%;
    width: 90%;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .info-model {
      margin-bottom: 20px;
    }
  }

  .chit-data-container {
    flex-grow: 1;
    overflow: hidden;
  }

  ::v-deep .el-tabs {
    .el-tabs__content {
      height: calc(100% - 60px);
    }
  }
}
</style>
